<template>
  <div class="left">
    <el-tree
      ref="MyTree"
      :data="Industry"
      :props="defaultProps"
      accordion
      node-key="id"
      @node-click="handleNodeClick"
      :default-expanded-keys="[4]"
    ></el-tree>
  </div>
</template>

<script>
import { industryFields } from "@api/atlas";
export default {
  data() {
    return {
      Industry: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  props: ["open"],
  created() {},
  mounted() {
    this.getIndustry();
  },
  methods: {
    async getIndustry() {
      let res = await industryFields();
      // console.log(res);
      if (res.code == 0) {
        this.Industry = res.navleftdata;
      } else {
        this.Industry = [];
      }
      setTimeout(() => {
        if (this.open) {
          this.$refs.MyTree.setCurrentKey(this.Industry[0].children[0].id);
          //  this.$emit("cateid", this.Industry[0].children[0]);
        } else {
          this.$refs.MyTree.setCurrentKey(this.Industry[0].id);
          //  this.$emit("cateid", this.Industry[0]);
        }
        // this.$refs.MyTree.setCurrentKey(this.Industry[0].id);
        // .children[0]
      }, 100);
    },
    handleNodeClick(data) {
      console.log(this.open);
      if (this.open) {
        if (data.cate == 1) {
          this.$emit("cateid", data.children[0]);
          this.$refs.MyTree.setCurrentKey(data.children[0].id);
        }
        if (data.cate == 2) {
          this.$emit("cateid", data);
        }
      } else {
        this.$emit("cateid", data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 360px;
  height: 100%;
}
.el-tree {
  height: 100%;
  background: #ffffff;
  font-family: Microsoft YaHei;
  font-size: 16px;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
  color: #666;
}
/deep/ .el-tree-node__content {
  height: 60px;
  line-height: 60px;

  .el-tree-node__label {
    font-weight: 400;
    font-size: 20px;
    color: #333;
  }
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    height: 50px;
    line-height: 50px;
    background: #f7faff;
    .el-tree-node__label {
      font-size: 16px;
    }
  }
}
/deep/.el-tree-node__children {
  .el-tree-node__label {
    font-weight: 400;
    color: #666;
  }
}
/deep/ .el-tree-node__content {
  padding: 0 30px !important;
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    padding: 0 30px 0 48px !important;
  }
}
/deep/.is-expanded {
  .el-tree-node__content {
    position: relative;
    .el-tree-node__label {
      font-weight: bold;
      font-size: 20px;
      color: #0043b3;
    }
  }
  .el-tree-node__children {
    background: #f7faff;

    .el-tree-node__label {
      font-weight: 400;
      font-size: 16px;
      color: #666;
    }
  }
}
/deep/.el-tree > .el-tree-node:hover > .el-tree-node__content {
  background: #fff;
}
/deep/.el-tree > .el-tree-node:focus > .el-tree-node__content {
  background: #fff;
}

/deep/.is-current > .el-tree-node__content > .el-tree-node__label {
  font-weight: bold;
  color: #0043b3 !important;
}
/deep/ .el-tree-node__children .is-current > .el-tree-node__content {
  color: #0043b3;
  background: #e9f3ff;
  border-right: 4px solid #0043b3;
}
/deep/ .el-tree-node__expand-icon {
  position: absolute;
  cursor: default;
  right: 10px;
}

/deep/.el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/icon-page-right.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
/deep/ .el-tree-node__content {
  cursor: default;
}
/deep/.is-current .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
// /deep/ .el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("") no-repeat center
//     center;
// }
// /deep/.is-current > div > span.el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center
//     center;
// }
// // 右侧图标 位置  不重复
/deep/.el-tree
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label::before {
  width: 26px;
  height: 26px;
  display: inline-block;
  content: "";
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -4px;
}

/deep/.el-tree
  > .el-tree-node:nth-child(1)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list01.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list02.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list03.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list03-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list03-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list04.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list04-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list04-select.png") no-repeat center;
}

/deep/.el-tree
  > .el-tree-node:nth-child(5)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list05.png") no-repeat center;
}

/deep/.el-tree
  > .el-tree-node:nth-child(5).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list05-select.png") no-repeat center;
}

/deep/.el-tree
  > .el-tree-node:nth-child(5).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list05-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(6)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list06.png") no-repeat center;
}
/deep/
  .el-tree
  > .el-tree-node:nth-child(6).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list06-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(6).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list06-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(7)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list07.png") no-repeat center;
}
/deep/
  .el-tree
  > .el-tree-node:nth-child(7).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list07-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(7).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/leftTree/icon-list07-select.png") no-repeat center;
}
</style>
